<template>
  <div class="container">
    <!-- 左卡片 -->
    <el-card style="width:70%">
      <!-- 头部 -->
      <div class="fl headL">
        <div class="headImg">
          <img v-imgerr="require('@/assets/common/img.jpeg')" :src="staffPhoto">
        </div>
        <div class="headInfoTip">
          <p>{{ userList.username }} </p>
          <div class="up">
            <P>入职时间：{{ userList.timeOfEntry | formatDate }}</P>
            <div>最新工资：{{ salarysList.currentBasicSalary +salarysList.currentPostWage }}</div>
          </div>
          <div class="down">
            <P>当月基本工资：{{ salarysList.currentBasicSalary }}</P>
            <P>当月岗位工资:{{ salarysList.currentPostWage }}</P>
          </div>
        </div>
      </div>

      <!-- middle 中间表 -->
      <div class="sac">
        <b style="margin:20px 0">津贴</b>
        <el-table
          class="newtable"
          :data="allowanceList"
          style="width: 100%"
        >
          <el-table-column
            :border="false"
            prop="date"
            label="津贴类型"
            width="180"
          />
          <el-table-column
            prop="subsidy"
            label="补贴金额"
            width="180"
          />
          <el-table-column
            :border="false"
            prop="mobil"
            label="津贴类型"
            width="180"
          />
          <el-table-column
            prop="mobilSubsidy"
            label="补贴金额"
            width="180"
          />

        </el-table>
      </div>

      <div class="sac">
        <div class="publicMoney">
          <b>社保公积金</b>
          <div>企业:</div>
          <div>个人:</div>
        </div>
        <el-table
          class="newtable"
          :data="allowanceList2"
          style="width: 100%"
        >
          <el-table-column
            :border="false"
            prop="SoSecurity"
            label="缴费项目"
            width="180"
          />
          <el-table-column
            prop="socialSecurityBase"
            label="基数"
            width="180"
          />
          <el-table-column
            prop="socialSecurityEnterprise"
            label="企业缴纳"
          />
          <el-table-column
            prop="transportationSubsidyAmount"
            label="个人缴纳"
          />
        </el-table>
      </div>

      <!-- bottom  -->
      <el-form ref="form" style="margin-top:20px" :model="form" label-width="140px">
        <el-form-item style="width:50%" label="实际出勤天数(正式)">
          <el-input :disabled="true" value="0" />
        </el-form-item>
        <el-form-item style="width:50%" label="计薪(正式)">
          <el-input :disabled="true" value="0" />
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 右卡片 -->
    <el-card class="cardT">
      <h3>招聘日程</h3>
      <hr>
      <div class="timeBig">
        <div class="timeLeft">
          <p /><br><el-timeline class="spanList" :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :icon="activity.icon"
              :color="activity.color"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div class="block">
          <p>放弃</p>
          <p>放弃</p>
        </div>

      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserDetailById } from '@/api/user'
import { getSalaryssetting, getChangeSalarys, getsettingMonth, socialSecuritys } from '@/api/salarys'
export default {

  data() {
    return {
      redata: {},
      allowanceList: [
        {
          date: '交通补助',
          mobil: '通讯补助',
          SoSecurity: '社保',
          subsidy: '',
          mobilSubsidy: ''
          // sum: 1
        },
        {
          date: '午餐补助',
          mobil: '住房补助',
          SoSecurity: '公积金',
          subsidy: '',
          mobilSubsidy: ''
          // sum: 3
        }

      ],
      allowanceList2: [
        {
          SoSecurity: '社保',
          socialSecurityBase: '',
          socialSecurityEnterprise: '' // 企业缴纳
          // sum: 1
        },
        {

          SoSecurity: '公积金',
          socialSecurityBase: ''
          // sum: 3
        },
        {
          SoSecurity: '缴费合计',
          socialSecurityBase: ''
          // sum: 3
        }
      ],
      socialSecuritysList: [], // 根据用户id查询用户的社保数据
      settingMonthList: [], // 获取企业是否设置当月工资
      salarysList: [],
      reportsList: [],
      userList: {},
      reverse: false,
      // el-icon-bangzhu
      activities: [{
        content: 'HR专员',
        timestamp: '2018-04-15',
        type: 'primary',
        color: '#0bbd87',
        icon: 'el-icon-bangzhu'
      },
      {
        content: 'HR专员',
        color: '#0bbd87',
        icon: 'el-icon-bangzhu',
        timestamp: '2018-04-13'
      },
      {
        color: 'transparent'
      }
      ],

      form: []
    }
  },
  computed: {
    ...mapGetters([
      'staffPhoto'
    ])
  },
  created() {
    // 获取用户信息
    this.getUserDetailById()
    // 获取薪资津贴
    this.getSalaryssetting()
    this.getChangeSalarys()
    this.getsettingMonth()
    this.socialSecuritys()
  },
  methods: {
    // 根据用户id查询用户的社保数据 socialSecuritys
    async socialSecuritys() {
      this.socialSecuritysList = await socialSecuritys(this.$route.params.id)
      console.log(this.socialSecuritysList)
      // 社保基数
      this.allowanceList2[0].socialSecurityBase = this.socialSecuritysList.userSocialSecurity.socialSecurityBase
      // 公积金基数
      this.allowanceList2[1].socialSecurityBase = this.socialSecuritysList.userSocialSecurity.providentFundBase
      this.allowanceList2[2].socialSecurityBase = this.allowanceList2[0].socialSecurityBase + this.allowanceList2[1].socialSecurityBase
      // // 社保缴纳  socialSecurityEnterprise
      // this.allowanceList2[0].socialSecurityEnterprise = this.socialSecuritysList.userSocialSecurity.socialSecurityEnterprise
      // console.log(this.allowanceList2[0])
    },

    // 获取企业是否设置当月工资
    async getsettingMonth() {
      this.settingMonthList = await getsettingMonth()
      console.log(this.settingMonthList.dataMonth)
      // // // 根据年月查询企业用户薪资列表
      // this.reportsList = await reports(Number(202005))
      // console.log(this.reportsList)
    },

    async getUserDetailById() {
      console.log(1)
      this.userList = await getUserDetailById(this.$route.params.id)
      // console.log(res)
    },
    // 获取薪资津贴
    async getSalaryssetting() {
      this.redata = await getSalaryssetting()
      console.log(this.redata)
      this.allowanceList[0].subsidy = this.redata.transportationSubsidyScheme
      this.allowanceList[1].subsidy = this.redata.lunchAllowanceAmount
      this.allowanceList[0].mobilSubsidy = this.redata.communicationSubsidyAmount
      this.allowanceList[1].mobilSubsidy = this.redata.housingSubsidyAmount
      // communicationSubsidyAmount
      console.log(this.allowanceList)
    },
    async getChangeSalarys() {
      this.salarysList = await getChangeSalarys(this.$route.params.id)
      console.log(this.salarysList)
    }
  }

}
</script>

<style lang="scss" scoped>
.block{
    // background-color: red;
    position: absolute;
    left: 66px;
    font-size: 16px;
    font-weight: bold;
    top: 11px;
    p{
      margin: 28px 0;
    }
}
.timeBig{
  display: table;
  position: relative;
}

.spanList{
  margin-left: 80px;
}
.cardT{
  width: 29%;
}
.container{
  padding:15px 15px ;
  display: flex;
  background-color:#f0f2f5;
  justify-content: space-between;
}
.publicMoney{
  margin:20px 0;
  width: 450px;
  justify-content: space-between;
  display: flex;
}
::v-deep el-table{
  background-color: #6fc !important
}
.down{
  width: 300px;
  margin-left: 90px;
  display: flex;
}
  .headImg {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #999;
          img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
</style>
